import { View, Text, Button } from "@tarojs/components";
import { FC, useState } from "react";
import Taro from "@tarojs/taro";
import "./index.scss";
import { Toast } from "@nutui/nutui-react-taro";

const LoginPage: FC = () => {
  const [loading, setLoading] = useState(false);

  // 处理获取手机号
  const handleGetPhoneNumber = async (e) => {
    try {
      setLoading(true);
      console.log("获取手机号返回数据", e);

      if (e.detail.errMsg === "getPhoneNumber:ok") {
        // 获取到加密的手机号信息
        const { code } = e.detail;

        // TODO: 这里应该调用后端接口，将code发送到后端，后端通过微信接口解析手机号
        // 在实际项目中，这里应该发送请求到后端获取用户信息

        // 模拟登录成功
        Toast.show("登录成功", {
          icon: "success",
          duration: 2000,
        });

        // 模拟登录延迟
        setTimeout(() => {
          // 登录成功后跳转到首页
          Taro.switchTab({
            url: "/pages/questionnaire/index",
          });
        }, 2000);
      } else {
        // 用户拒绝授权
        Toast.show("需要授权手机号才能使用", {
          icon: "fail",
          duration: 2000,
        });
      }
    } catch (error) {
      console.error("登录错误", error);
      Toast.show("登录失败，请重试", {
        icon: "fail",
        duration: 2000,
      });
    } finally {
      setLoading(false);
    }
  };

  const handlePrivacyClick = () => {
    // 打开隐私政策页面
    Taro.showModal({
      title: "隐私政策",
      content:
        "我们非常重视您的个人信息保护，您的手机号仅用于账号登录和紧急联系方式，不会用于其他商业用途。",
      showCancel: false,
      confirmText: "我知道了",
    });
  };

  const handleTermsClick = () => {
    // 打开用户协议页面
    Taro.showModal({
      title: "用户协议",
      content:
        "欢迎使用mo契服务，使用本服务前请仔细阅读用户协议和隐私政策，继续使用表示您同意相关条款。",
      showCancel: false,
      confirmText: "我知道了",
    });
  };

  return (
    <View className="login-page">
      <View className="logo-container">
        <View className="logo-circle">
          <Text className="logo-text">mo契</Text>
        </View>
      </View>

      <View className="app-slogan">让真诚的关系始于安全的自我表达</View>

      <View className="login-content">
        <Button
          className="login-button"
          openType="getPhoneNumber"
          onGetPhoneNumber={handleGetPhoneNumber}
          loading={loading}
        >
          {loading ? "登录中..." : "手机号一键登录"}
        </Button>

        <View className="privacy-terms">
          <Text>登录即表示您同意</Text>
          <Text className="link" onClick={handleTermsClick}>
            《用户协议》
          </Text>
          <Text>和</Text>
          <Text className="link" onClick={handlePrivacyClick}>
            《隐私政策》
          </Text>
        </View>
      </View>

      <Text className="version">版本 1.0.0</Text>
    </View>
  );
};

export default LoginPage;
